<template>
	<div class="page-foot">
		<div class="flex-c-ac">
			<h1>全球先进制造业的高端服务商</h1>
			<div class="desc-text desc">专注于打造供应链电子化生态圈的“拥抱AI”提效AI小工具和一站式AI能力提升解决方案</div>
			<div class="flex-jsc" style="width: 27%;gap: 10px;">
				<AiList />
			</div>
			<div class="custom-hr"></div>
			<div class="flex">
				<div class="company-info">
					<img src="@/assets/img/bottom-logo.png" alt="logo" class="bottom-logo">
					<div>服务热线: </div>
					<div class="phone">021-65380903</div>
					<div class="company">上海(总部)</div>
					<div class="address">上海市杨浦区杨树浦路1062号滨江国际4号楼</div>
				</div>
				<div class="flex-jsc more-info">
					<div>
						<div class="title">方案</div>
						<div class="desc">APS高级排产系统</div>
						<div class="desc">库存优化系统</div>
						<div class="desc">相似图纸查询系统</div>
						<div class="desc">更多</div>
					</div>
					<div>
						<div class="title">服务</div>
						<div class="desc">服务条款</div>
						<div class="desc">隐私条款</div>
						<div class="desc">反馈意见</div>
						<div class="desc"></div>
						<div class="desc"></div>
					</div>
					<!-- <div>
						<div class="title">快速导航</div>
						<div class="desc">服务模式</div>
						<div class="desc">新闻中心</div>
						<div class="desc">人才招聘</div>
						<div class="desc"></div>
						<div class="desc"></div>
					</div>
					<div>
						<div class="title">咨询</div>
						<div class="desc">关于我们</div>
						<div class="desc">加入我们</div>
						<div class="desc">商务合作</div>
						<div class="desc">生态业务合作</div>
						<div class="desc"></div>
					</div> -->
					<div>
						<div class="title">公司</div>
						<div class="desc">关于我们</div>
						<div class="desc">加入我们</div>
						<div class="desc">商务合作</div>
						<div class="desc">生态业务合作</div>
						<div class="desc"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import AiList from './AiList.vue';

</script>

<style scoped lang="less">
.page-foot {
	width: 100%;
	height: 531px;
	background: url("@/assets/img/bg-foot.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;

	h1 {
		font-size: 37px;
		font-weight: 700;
		margin-top: 44px;
	}

	.desc-text {
		margin: 20px 0;
		font-size: 18px;

		&::before,
		&::after {
			content: "";
			width: 63px;
			height: 1px;
			background: rgba(124, 133, 141, 0.5);
			margin-top: 10px;
			display: block;
			position: relative;
			left: -75px;
			top: 10px;
		}

		&::after {
			right: -715px;
			left: auto;
			top: -20px;
		}
	}



	.custom-hr {
		width: 1100px;
		height: 0.5px;
		margin-top: 24px;
		background: rgba(124, 133, 141, 0.5);
		margin-bottom: 48px;
	}

	.company-info {
		font-size: 16px;
		color: #000;
		margin-right: 337px;

		.bottom-logo {
			margin-bottom: 23px;
		}

		.phone {
			font-size: 30px;
			font-weight: 700;
			color: rgba(251, 147, 55, 1);
			margin-bottom: 14px;
		}

		.company {
			font-size: 18px;
		}

		.address {
			color: rgba(124, 133, 141, 1);
			font-size: 13px;
			line-height: 20px;
		}
	}

	.more-info {
		width: 500px;

		&>div {
			height: 184px;
		}

		.title {
			margin-bottom: 33px;
			font-size: 18px;
		}

		.desc {
			margin-bottom: 18px;
			cursor: pointer;
		}
	}
}
</style>
